<template>
  <div>
    <el-container>
      <el-header>
        <!--标题-->
        <div class="header">
<!--          <h3>哈哈</h3>-->
          <h3>{{this.titleName}}</h3>
        </div>
      </el-header>
      <el-container>
        <!--用户列表-->
        <el-aside width="250px">
          <div>
            <p>当前用户列表</p>
          </div>
          <div class="user-list">
            <ul>
              <li class="user-item" v-for="item in nameList" :key="item.name">
                <!--                <img :src="require('@/assets/avatar/' + item.avatar)" alt />-->
                <span>{{item.name}}</span>
              </li>
            </ul>
          </div>
        </el-aside>
        <el-container>
          <!--聊天区展示-->
          <el-main>
            <div class="chatcontent">
              <ul class="join" ref="joinUs">
                <li
                  v-for="(item) in userList"
                  :key="item.name"
                  :class="{'my-message':item.id===1?true:false,'other-message':item.id===2?true:false}"
                >
                  <div v-if="item.id === 1">
                    <!--                    <img-->
                    <!--                      :src="item1.file"-->
                    <!--                      alt-->
                    <!--                      class="file"-->
                    <!--                      v-if="item1.file"-->
                    <!--                      @load="loadOverImg"-->
                    <!--                      preview="1"-->
                    <!--                    />-->
                    <span>{{item.content}}</span>
                    <span>{{item.name}}</span>
                    <!--                    <img :src="require('@/assets/avatar/' + item1.avatar)" class="avatar" />-->
                  </div>
                  <div v-if="item.id ===2">
                    <!--                    <img :src="require('@/assets/avatar/' + item1.avatar)" alt class="avatar" />-->
                    <!--                    <img-->
                    <!--                      :src="item1.file"-->
                    <!--                      alt-->
                    <!--                      class="file"-->
                    <!--                      v-if="item1.file"-->
                    <!--                      @load="loadOverImg"-->
                    <!--                      preview="1"-->
                    <!--                    />-->
                    <span>{{item.name}}</span>
                    <span>{{item.content}}</span>
                  </div>
                </li>
              </ul>
            </div>
          </el-main>
          <!--消息区-->
          <el-footer height="50px">
            <div class="sendBox">
              <el-input type="text" placeholder="请输入内容..." v-model="word" class="inputWord"
                        @keyup.enter.native="sendmsg1"></el-input>
              <el-button type="primary" size="small" class="sendBtn" @click="sendmsg1">发送</el-button>
            </div>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  export default {
    name: "talk",
    data() {
      return {
        userList: [{
          id: '1',
          name: "小明同学",
          content: "你好啊,小红同学!",
        }, {
          id: '2',
          name: "小红同学",
          content: "你好啊,小明同学!",
        }],
        nameList:[],
        word: "",
        titleName:this.$store.state.username,
        status:this.$store.state.status,

      }
    },

    watch:{
      status(newVal){

      }

    },

    methods: {



      sendmsg1() {
        this.userList.push({id: 1, name: "xm", content: this.word});
        this.word = "";
      },
      sendmsg2(){
        this.userList.push({id:2,name: "xh",content: this.word});
        console.log(this.titleName);
        this.word = "";
      }
    }
  }
</script>

<style scoped>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    height: 50px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    height: 500px;
  }

  .el-footer {
    background-color: #B3C0D1;
    color: #333;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    height: 450px;
  }

  .inputWord {
    width: 90%;

  }

  .chatcontent {
    height: 300px;
  }

  .join {
    /*text-align: center;*/
    /*color: #ccc;*/
    overflow: auto;
    height: 300px;
  }

  li {
    padding: 10px;
  }

  .my-message {
    text-align: right;
  }

  .other-message {
    text-align: left;
  }


</style>
